<template>

	<view class="coupon-goods-list">
		<view class="title" v-if="title">
			
				<text class="">{{title}}</text>
		
		</view>
		<view :class="showType == 2 ? 'two-goods': 'goods'">
			<view class="item" @tap="toDetail(item)" v-for="(item,index) in goods" :key="index">
				<view class="goods-img">
					<image class="" :src="item.goods_img"></image>
					<view class="commission" v-if="item.commission_amount > 0">赚: {{item.commission_amount}}</view>
				</view>
				<view class="goods-info">
					<view class="goods-name">
						{{item.goods_title}}
					</view>
					<view class="shop-info uni-ellipsis" v-if="item.shop_title"><uni-icon type="home" size="20"></uni-icon> {{item.shop_title}}</view>
					<view class="shop-amount">
						<view class="">
							<block v-if="item.goods_type == 'tmall'">天猫价</block>
							<block v-if="item.goods_type == 'taobao'">淘宝价</block>
							<block v-if="item.goods_type == 'jd'">京东价</block>
							<block v-if="item.goods_type == 'pdd'">拼多多价</block>
							:¥{{item.goods_price}}
						</view>
						<view class="sale-number">月销:<text>{{item.sale_number}}</text></view>
					</view>
					<view class="coupon-amount">{{priceName}}￥<text class="">{{item.coupon_after_price}}</text></view>
					<view class="coupon-info"  v-if="item.coupon_amount > 0">
						
						
							<view class="icon">
								<image src="/static/tmall_logo.png" v-if="item.goods_type == 'tmall'" mode=""></image>
								<image src="/static/taobao_logo.png" v-if="item.goods_type == 'taobao'"  mode=""></image>
								<image src="/static/jd_logo.png" v-if="item.goods_type == 'jd'" mode=""></image>
								<image src="/static/pdd_logo.png" v-if="item.goods_type == 'pdd'" mode=""></image>
							</view>
							<view class="info">
								<text class="coupon-block top"></text>
								<text class="coupon-block right"></text>
								<text class="coupon-block bottom"></text>
								<text class="coupon-block left"></text>
								<view class="amount"><text>￥</text>{{item.coupon_amount}}</view>
								<view class="tips-btn">立即兑换</view>
							</view>
					</view>
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	import uniIcon from './uni-icon.vue';
	
	
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				
			};
		},
		props: ['goods', 'title', 'goodsType', 'showType', 'priceName'],
		methods: {
			//去商品详情
			toDetail: function(goods){
				// goods.goods_type = this.goodsType;
				// uni.setStorageSync('goodsInfo', goods);
		
				uni.navigateTo({
					url:'/pages/coupon/detail?detailDate=' + encodeURIComponent(JSON.stringify(goods))
				})
			}
		}
	}
</script>

<style>
	.coupon-goods-list view{
		display: flex;
	}
	.coupon-goods-list {
		flex-direction: column;
		margin-bottom: 16upx;
	}

	.coupon-goods-list .title {
		line-height: 80upx;
		padding: 0 20upx;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to left,#F09BC2 0,#AE65AC 50%, #F09BC2 100%);
		border-bottom: 1upx solid #eee;
		height: 80upx;
		color: #fff;
	}

	.coupon-goods-list .shop-info{
		align-items: center;
	}

	.coupon-goods-list .goods {
		flex-direction: column;
		background: #fff;
		padding: 0 20upx;
	}

	.coupon-goods-list .goods .item {
		border-bottom: 1upx solid #eee;
		padding: 20upx 0;

	}

	.coupon-goods-list .goods .item .goods-img {
		width: 200upx;
		flex-direction: column;
		
	}
	
	.coupon-goods-list .goods .goods-img .commission{
		background: linear-gradient(to left, #FF5E5E 0, #FF927C 100%);
		justify-content: center;
		color: #fff;
		padding: 6upx 0;
		font-size: 20upx;
		margin-top: 20upx;
		
	}

	.coupon-goods-list .goods .item .goods-info {
		flex: 1;
		flex-direction: column;
		padding-left: 20upx;
		color: #999;
	}
	
	

	.coupon-goods-list .goods-name{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333;
		margin-bottom: 10upx;
		
	}
	
	.coupon-goods-list .goods .item .goods-name image{
		width: 30upx;
		height: 30upx;
	}
	
	

	.coupon-goods-list .goods .item image {
		width: 200upx;
		height: 200upx;
		border-radius: 20upx;
	}

	.coupon-goods-list .goods .shop-amount {
		justify-content: space-between;
		/* padding: 20upx 0; */
	}

	

	.coupon-goods-list .goods .coupon-amount {
		color: #FC4D52;
		align-items: baseline;
	}

	.coupon-goods-list .goods .coupon-amount text {
		font-size: 40upx;
	}

	.coupon-goods-list .goods .sale-number{
		/* color: #FA4DBE; */
	}
	
	.coupon-goods-list .coupon-info {
		align-items: center;
	}
	
	.coupon-goods-list .coupon-info .icon{
		margin-right: 20upx;
	}
	
	.coupon-goods-list .coupon-info .icon image{
		width: 50upx;
		height: 50upx;
	}
	
	.coupon-goods-list .coupon-info .info {
		background: #CB191F;
		color: #D4B284;
		height: 50upx;
		padding: 10upx 40upx;
		position: relative;
	}
	
	.coupon-goods-list .coupon-info .info .amount{
		display: flex;
		align-items: center;
		margin-right: 40upx;
		font-size: 40upx;
	}
	
	.coupon-goods-list .coupon-info .info .amount text{
		font-size: 10upx;
	}
	
	.coupon-goods-list .coupon-info .info .tips-btn{
		background: linear-gradient(to left, #F0DAB2 0, #FFFFFF 50%, #F0DAB2 100%);
		font-size: 20upx;
		align-items: center;
		padding: 0 20upx;
		border-radius: 8upx;
		color: #CB191F;
	}

	.coupon-goods-list .coupon-info .info .coupon-block {
		width: 20upx;
		height: 20upx;
		background: #fff;
		position: absolute;
		border-radius: 10upx;
	}
	
	.coupon-goods-list .coupon-info .info .coupon-block.top{
		top: -10upx;
		left: -10upx;
	}
	
	.coupon-goods-list .coupon-info .info .coupon-block.right{
		top: -10upx;
		right: -10upx;
	}
	.coupon-goods-list .coupon-info .info .coupon-block.bottom{
		bottom: -10upx;
		right: -10upx;
	}
	.coupon-goods-list .coupon-info .info .coupon-block.left{
		bottom: -10upx;
		left: -10upx;
	}
	
	.coupon-goods-list .two-goods {
		flex-wrap: wrap;
		background: #f5f5f5;
		flex-direction: row;
		padding: 10upx 0 0 10upx;
	}

	.coupon-goods-list .two-goods .item {
		border-bottom: 1upx solid #eee;
		margin: 0 10upx 10upx 0;
		width: 360upx;
		box-sizing: border-box;
		flex-direction: column;
		background: #fff;
		box-sizing: border-box;
		
	}

	.coupon-goods-list .two-goods .item .goods-img {
		width: 360upx;
		flex-direction: column;
	}
	
	.coupon-goods-list .two-goods .goods-img .commission{
		background: linear-gradient(to left, #FF5E5E 0, #FF927C 100%);
		justify-content: center;
		color: #fff;
		padding: 6upx 0;
		font-size: 20upx;
	}

	.coupon-goods-list .two-goods .item .goods-info {
		flex: 1;
		flex-direction: column;
		padding: 10upx 8upx;
		color: #999;
	}
	
	
	.coupon-goods-list .two-goods .goods-name{
		display: inline-block;
	}

	.coupon-goods-list .two-goods .item .goods-img image {
		width: 360upx;
		height: 360upx;
	}
	
	.coupon-goods-list .two-goods .item .goods-name  image{
		width: 60upx;
		height: 60upx;
	}

	.coupon-goods-list .two-goods .shop-amount {
		flex-direction: row;
		justify-content: space-between;
		font-size: 20upx;
		
	}

	.coupon-goods-list .two-goods .coupon-info {
		flex-direction: row;
		justify-content: space-between;
		
	}
	
	.coupon-goods-list .two-goods .coupon-info .info{
		padding:10upx;
	}

	.coupon-goods-list .two-goods  .coupon-amount {
		color: #FC4D52;
		align-items: baseline;
		margin-bottom: 10upx;
	}

	.coupon-goods-list .two-goods  .coupon-amount text {
		font-size: 40upx;
	}
	
</style>
